﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Tab test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />

<!-- general libraries -->

<!--[if IE]>
<script src="excanvas.js" type="text/javascript"></script>
<![endif]--> 


<script src="jquery.js" type="text/javascript" ></script>   

<!-- MSE-iT libraries -->
<script src="../jquery.mseitUtilities.js" type="text/javascript" ></script> 
<script src="../JQuery.backgroundCanvas.js" type="text/javascript"></script>

<!-- background canvas function for all tests (bound to class .Test) -->
<script type="text/javascript">
$(document).ready(function() 
{	
	$("#TabContainer").backgroundCanvas(); 
	$("#TabContainer").css("border-color","transparent");
	$("#TabContainer").css("background-color","transparent");
	$("#TabContainer li").css("border-color","transparent");
	$("#TabContainer li").css("background-color","transparent");
	$("#TabContainer div").css("border-color","transparent");
	$("#TabContainer div").css("background-color","transparent");
});

// Draw the background  on load and resize
$(window).load(function () {  DrawBackground(); });
$(window).resize(function() {   DrawBackground(); });

function DrawBackground() {	
 $("#TabContainer").backgroundCanvasPaint(TabBackgroundPaintFkt); 
}

function TabBackgroundPaintFkt(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{

	
	

		// process each list element and draw a tab shape
		$element.find("#TabContainerContent").each(
		function(){
		     $this = $(this);
		     var offsetParent = $content.offset();
		     var offset = $this.offset({relativeTo:$content[0]});
		     var width = $this.outerWidth();
		     var height = $this.outerHeight();

			var options = {x: offset.left - offsetParent.left , y: offset.top - offsetParent.top,
				 height: height, width: width, radius:14,  border: 0 };
	
			context.fillStyle = "#9999EF";
			$.canvasPaint.roundedRect(context,options);
			
			// Draw the gradient filled inner rectangle
			options.border = 1;
			context.fillStyle = "#D8E2F5"; 
			$.canvasPaint.roundedRect(context,options);

		     });



		// process each list element and draw a tab shape
		$element.find("li").reverse().each(
		function(){
		     $this = $(this);
		     var offsetParent = $content.offset();
		     var offset = $this.offset({relativeTo:$content[0]});
		     var width = $this.outerWidth();
		     var height = $this.outerHeight();
		     var options = {x: offset.left - offsetParent.left , y: offset.top - offsetParent.top,  height: height, 
		     width: width +15, offsetLeft: 5, offsetRight: 30, radiusLeft: 7, radiusRight: 7,
		     border:0};
		     
		     context.fillStyle = "#9999CC";  // Border Color
		     $.canvasPaint.roundTab(context,options); 
		     options.border = 1;                 
		     context.fillStyle = "#D8E2F5"; // Background color
		     $.canvasPaint.roundTab(context,options);                  
		     });
		     
		     
		     
}
</script>

<style type="text/css">

body {	
background-color: yellow;
margin: 5px 5px 5px 5px;
padding: 0px 0px 0px 0px;

}

#TabContainer
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display:block;
	width:90%;
	background:green;
	border: 1px fuchsia solid;
}

#TabContainer ul
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 40px;
	
	
}

#TabContainer li
{
	padding-left: 20px;
	padding-right: 40px;
	display:block;
	float: left;
	border: 1px red solid;
	background: aqua;
	margin-bottom: -1px;
}

#TabContainerContent
{
	border: 1px red solid;
	clear:left;
	background: aqua;	
	height: 100px;
}


</style>


</head>


<body>

<div id="TabContainer">

<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Super Large Tab</li>
<li>Super Large Tab</li>
<li>Super Large Tab</li>
</ul>


<div id="TabContainerContent">This is the content of the tabbed box</div>
</div>



</body>
</html>
